<template>
  <div class="ant-descriptions ant-descriptions-bordered">
    <div class="ant-descriptions-title">控制目标</div>
    <a-table
      v-if="report && report.content"
      ref="table"
      bordered
      size="middle"
      rowKey="projectName"
      :columns="headers"
      :dataSource="data"
      :pagination="false"
    >
    </a-table>
    <div v-else>
      <a-empty :image="simpleImage" />
    </div>
  </div>
</template>

<script>
import { Empty } from 'ant-design-vue'

export default {
  name: 'Target',
  props: ['report'],
  data() {
    return {}
  },
  computed: {
    headers() {
      let formatHeaders = []
      if (this.report.header) {
        this.report.header.forEach((item, index) => {
          formatHeaders.push({
            title: item.tableName,
            dataIndex: item.key,
            key: item.key,
            align: 'center',
            customRender: (value, row, index) => {
              let element = []
              console.log()
              if (value) {
                if (row[`${item.key}Summary`] - row[`${item.key}Target`] > 0) {
                  element = (
                    <div>
                      <span>{value}</span>
                      <span style="color: red">↑</span>
                    </div>
                  )
                } else {
                  element.push(value)
                }
              } else {
                element.push('/')
              }
              const obj = {
                children: element, // 这是渲染列的值，支持渲染html
                attrs: {}, // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
              }
              return obj
            },
          })

          if (index === 0) {
            formatHeaders[index].align = 'left'
          }
        })
      }
      return formatHeaders
    },
    data() {
      return this.report ? this.report.content : []
    },
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
  },
}
</script>

<style lang="less" scoped>
.ant-descriptions-title.small {
  background-color: #fff;
  padding: 10px;
  text-align: center;
  color: #000;
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
}
</style>